<template>
   <el-header style="padding: 0; height: 60px; width: 100%">
      <div
         style="
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: space-between;
         "
      >
         <!-- 侧边栏 -->
         <div style="width: 100%">
            <MainAside></MainAside>
         </div>

         <!-- 用户个人信息下拉列表 -->
         <div style="overflow: hidden; z-index: 99; background-color: #fff">
            <el-menu
               style="position: relative; border-bottom: none !important"
               active-text-color="#303133"
               class="el-menu-demo"
               mode="horizontal"
               :ellipsis="false"
            >
               <el-sub-menu index="none">
                  <template #title>
                     <div>
                        <el-icon style="margin-top: -2px; font-size: 20px">
                           <User />
                        </el-icon>
                        <span style="margin-right: 5px; font-size: 16px"
                           >NAME</span
                        >
                     </div>
                  </template>
                  <el-menu-item
                     @click="openPersonalInfoShowDialog()"
                     style="padding-left: 20px"
                     index="1"
                  >
                     <el-icon class="el_icon"><Document /></el-icon
                     >个人信息</el-menu-item
                  >
                  <el-menu-item
                     style="padding-left: 20px"
                     index="2"
                     @click="checkNowPassword()"
                  >
                     <el-icon class="el_icon"><Edit /></el-icon>
                     修改密码
                  </el-menu-item>
                  <el-menu-item
                     @click="logout()"
                     style="padding-left: 20px"
                     index="3"
                  >
                     <el-icon class="el_icon"><DArrowRight /></el-icon>登出
                  </el-menu-item>
               </el-sub-menu>
            </el-menu>
         </div>
      </div>
   </el-header>
</template>

<script>
import router from "@/rooter";
import MainAside from "@/components/MainAside.vue";
import { onMounted } from "vue";

export default {
   name: "MainHeader",
   components: {
      MainAside,
   },
   setup() {

      function logout() {
         localStorage.removeItem("token");
         router.replace("/login");
      }
      onMounted(async () => {});

      return {

         logout
      };
   },
};
</script>

<style scoped>
.el_icon {
   font-size: 15px;
   color: #919398;
}

.el-divider--vertical {
   display: inline-block;
   width: 1px;
   height: 12em;
   margin: 0 8px;
   margin-top: -10px;
   vertical-align: middle;
   position: relative;
}
</style>

<style>
.el-descriptions__body {
   background-color: transparent;
}
.el-divider__text {
   background-color: #f7f9fa;
}

.el-menu--horizontal > .el-sub-menu.is-active .el-sub-menu__title {
   border-bottom: none;
}

.el-checkbox__input.is-checked + .el-checkbox__label {
   color: #409eff !important;
}
</style>

